<template>
  <div class="v-tool-bar">
    <!-------------------------------------------------------- 日期 -------------------------------------------------------->
    <range-date-picker v-if="dateIsShow" class="date-time" :defaultDate="dateTime" @date-change="changeDate"></range-date-picker>
    <div class="rf">
      <!---------------------------------------------------指标---------------------------------------------------->
      <div class="v-multiple-selection lf" v-if="indexShow">
        <el-popover
          popper-class="vs-multiple-selection"
          ref="popover1"
          placement="bottom"
          trigger="click">
          <div class="select-all">
            <el-checkbox v-if="eventIndicatorList.length > 0" v-model="all" @change="changeAll1">全选</el-checkbox>
            <div v-else class="font12" style="text-align: center; color: #a7a7a7;">暂无数据</div>
          </div>
          <div class="checkbox-list">
            <!--多选列表-->
            <div class="checkbox-item" v-for="(item, ind) in eventIndicatorList" :key="item.key" @mouseover="radioListShow(item, ind)" @mouseout="radislistHide(item, ind)">
              <el-checkbox v-model="item.vs_isSelect" @change="itemCheckboxChange1(item)">{{ `${item.vs_event_name}_${item.vs_colume_chs}` }}</el-checkbox>
              <!--单选列表-->
              <div class="radio-list" v-show="item.vs_itemShow">
                <p class="radio-item" v-for="(val, index) in item.vs_list" :key="val.key">
                  <el-radio v-model="item.vs_radio" :label="index" @change="radioChange(ind, index)">{{ val.tgt_name }}</el-radio>
                </p>
              </div>
            </div>
          </div>
        </el-popover>
        <el-button v-popover:popover1>
          指标<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
      </div>
      <!------------------------------------------------- 分组显示 ------------------------------------------------->
      <div class="v-group-display lf" v-if="displayShow">
        <el-popover
          popper-class="vs-group-display"
          ref="popover2"
          placement="bottom"
          min-width="150"
          trigger="click">
          <div class="select-all">
            <el-checkbox v-if="groupList.length > 0" v-model="selAll" @change="changeAll2">全选</el-checkbox>
            <div v-else class="font12" style="text-align: center; color: #a7a7a7;">暂无数据</div>
          </div>
          <div class="checkbox-list">
            <el-checkbox-group v-model="checkedGroupList" @change="itemCheckboxChange2">
              <p class="checkbox-item" v-for="item in groupList" :key="item.code_value">
                <el-checkbox :label="item.code_value">{{ item.code_value_nm_cns }}</el-checkbox>
              </p>
            </el-checkbox-group>
            <!--暂时注销-->
            <!--<div class="result-list" v-show="arr.length > 0">-->
            <!--<p class="result-item" v-for="val in groupResult" :key="val.key">-->
            <!--<el-checkbox v-model="val.vs_isSelect" @change="itemCheckboxChange3(val)">{{ val.value }}</el-checkbox>-->
            <!--</p>-->
            <!--</div>-->
          </div>
        </el-popover>
        <el-button v-popover:popover2>
          显示<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
      </div>
      <!----------------------------------------------------线图---------------------------------------------------->
      <v-dropdown class="v-graphicSel lf" :options="graphicList" itemKey="code_value" itemValue="code_value_nm_cns"
                  :value="graphicValue" :width="80" :height="30" @on-change="changeGraphic" dropdownMenuClass="vs-graphic"></v-dropdown>
      <!----------------------------------------------- 时间查询条件 ------------------------------------------------>
      <v-dropdown v-if="timeRequest" class="v-timeRequest lf" :width="80" :height="30" :options="requestTimeList" itemKey="code_value" itemValue="code_value_nm_cns" :value="timeValue" @on-change="changeTimeRequest" dropdownMenuClass="vs-timeRequest"></v-dropdown>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import RangeDatePicker from '../RangeDatePicker/RangeDatePickerCp'
  import { getDateTime } from '../../assets/js/index'
  import VDropdown from '../select/VDropdown'
  import store from '@/store'

  // 暂时注销
  // 笛卡尔积算法
  // let getGroupResult = (arr) => {
  //   let list = []
  //   let ret1 = []
  //   let ret2 = []
  //   let dataA = getA(arr)
  //   for (let i = 0; i < dataA.length; i++) {
  //     getD(dataA[i], ret1, ret2)
  //     let obj = {
  //       key: ret1.join('_'),
  //       value: ret2.join('_'),
  //       vs_isSelect: true
  //     }
  //     list.push(obj)
  //     ret1 = []
  //     ret2 = []
  //   }
  //   return list
  // }
  //
  // let getA = (data) => {
  //   let len = data.length
  //   if (len === 0) {
  //     return []
  //   } else if (len === 1) {
  //     return data[0]
  //   } else {
  //     let r = data[0]
  //     for (let i = 1; i < len; i++) {
  //       r = getB(r, data[i])
  //     }
  //     return r
  //   }
  // }
  //
  // let getB = (a, b) => {
  //   let ret = []
  //   for (let i = 0; i < a.length; i++) {
  //     for (let j = 0; j < b.length; j++) {
  //       ret.push(getC(a[i], b[j]))
  //     }
  //   }
  //   return ret
  // }
  //
  // let getC = (a, b) => {
  //   if (!(a instanceof Array)) {
  //     a = [ a ]
  //   }
  //   let ret = Array.apply(null, a)
  //   ret.push(b)
  //   return ret
  // }
  //
  // let getD = (data, ret1, ret2) => {
  //   if (data instanceof Array) {
  //     for (let i = 0; i < data.length; i++) {
  //       if (data[i] instanceof Array) {
  //         getD(data[i], ret1, ret2)
  //       } else {
  //         ret1.push(data[i].code_value)
  //         ret2.push(data[i].code_value_nm_cns)
  //       }
  //     }
  //   } else {
  //     ret1.push(data.code_value)
  //     ret2.push(data.code_value_nm_cns)
  //   }
  // }

  export default {
    name: 'v-tool-bar',
    components: {
      VDropdown,
      RangeDatePicker
    },
    computed: {
      graphicValue: () => {
        return store.state.graphicValue
      }
    },
    props: {
      // 设置默认按天，时 。。。查询
      timeValue: {
        type: String
      },
      dateIsShow: {
        type: Boolean,
        default: true
      },
      indexShow: {
        type: Boolean,
        default: true
      },
      displayShow: {
        type: Boolean,
        default: true
      },
      timeRequest: {
        type: Boolean,
        default: true
      },
      num: {
        type: Number,
        default: 0
      }
    },
    watch: {
      eventIndicatorList: {
        deep: true,
        handler (newVal, oldVal) {
          let arr = []
          let count = 0
          newVal.forEach(item => {
            if (item.vs_isSelect === true) {
              let obj = {}
              obj.disp_serial = count + ''
              obj.meta_id = item.meta_id
              obj.cond_type = item.vs_tgt_meta_id + '__' + item.vs_event_meta_id
              arr.push(obj)
              count++
            }
          })
          this.$emit('on-change-index', arr)
        }
      }
    },
    data () {
      return {
        // 日期
        dateTime: [],
        eventIndicatorList: [],
        // 指标
        all: true, // 全选
        // radio_list: null, // 第二级菜单，单选项列表
        // 线图
        graphicList: null, // 图形列表
        // 按**时间
        requestTimeList: null, // 时间列表
        // 分组显示
        groupList: [], // 分组列表
        selAll: true, // 全选
        arr: [], // 预拼接的数组
        jsonList: [],
        groupResult: [], // 拼接后的数组
        checkedGroupList: [],
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        }
      }
    },
    methods: {
      // ****************************************** 分组显示 ******************************************
      getGroupList (list) {
        this.checkedGroupList = []
        this.groupList = []
        if (list !== undefined) {
          list.forEach((item, index) => {
            this.groupList.push({ code_value_nm_cns: item, code_value: index })
            this.checkedGroupList.push(index)
          })
        }
        this.selAll = this.checkedGroupList.length === this.groupList.length
        store.commit('pb_updateChartList', this.groupList)
        // 暂时注销
        // this.jsonList = list
        // this.selAll = true
        // this.groupList = []
        // this.checkedGroupList = []
        // this.jsonList.forEach(item => {
        //   item.vs_children.forEach(obj => {
        //     this.checkedGroupList.push(obj.code_value)
        //     this.groupList.push(obj)
        //   })
        // })
        // this.arr = []
        // this.jsonList.forEach(item => {
        //   this.arr.push(item.vs_children)
        // })
        // this.groupResult = getGroupResult(this.arr)
      },
      // 全选
      changeAll2 (val) {
        this.checkedGroupList = []
        if (val) {
          this.groupList.forEach(obj => {
            this.checkedGroupList.push(obj.code_value)
          })
          if (this.num === 0) {
            store.commit('pb_updateChartList', this.groupList)
          } else if (this.num === 1) {
            this.$emit('on-change-group', this.groupList)
          }
        } else {
          if (this.num === 0) {
            store.commit('pb_updateChartList', [])
          } else if (this.num === 1) {
            this.$emit('on-change-group', [])
          }
        }
        // 暂时注销
        // if (val === true) {
        //   this.checkedGroupList = []
        //   this.groupList.forEach(item => {
        //     this.checkedGroupList.push(item.code_value)
        //   })
        //   this.arr = []
        //   this.jsonList.forEach(item => {
        //     this.arr.push(item.vs_children)
        //   })
        //   this.groupResult = []
        //   this.groupResult = getGroupResult(this.arr)
        //   this.groupResult.forEach(item => {
        //     item.vs_isSelect = true
        //   })
        // } else {
        //   this.checkedGroupList = []
        //   this.arr = []
        // }
      },
      // 分组下拉菜单第一级改变事件
      itemCheckboxChange2 (arr) {
        this.selAll = arr.length === this.groupList.length
        let list = []
        if (arr.length > 0) {
          arr.forEach(item => {
            for (let i = 0; i < this.groupList.length; i++) {
              if (item === this.groupList[i].code_value) {
                list.push(this.groupList[i])
              }
            }
          })
        }
        if (this.num === 0) {
          store.commit('pb_updateChartList', list)
        } else if (this.num === 1) {
          this.$emit('on-change-group', list)
        }
        // 暂时注销
        // this.selAll = arr.length === this.groupList.length
        // this.arr = []
        // this.jsonList.forEach((item, index) => {
        //   let list = []
        //   for (let i = 0; i < arr.length; i++) {
        //     item.vs_children.forEach(obj => {
        //       if (arr[i] === obj.code_value) {
        //         list.push(obj)
        //       }
        //     })
        //   }
        //   if (list.length > 0) {
        //     this.arr.push(list)
        //   }
        // })
        // this.groupResult = []
        // this.groupResult = getGroupResult(this.arr)
        // this.$emit('on-change-group', this.groupResult)
      },
      // 分组下拉菜单第二级改变事件
      // 暂时注销
      // itemCheckboxChange3 (val) {
      //   this.$emit('on-change-group', this.groupResult)
      // },
      // ****************************************** 按天、小时、分钟。。。 ******************************************
      // 改变查询时间
      changeTimeRequest (item) {
        this.$emit('on-change-request', item)
      },
      // ****************************************** 图形 ******************************************
      // 改变图形显示样式
      changeGraphic (item) {
        if (this.num === 0) {
          store.commit('updatGraphicValue', item.code_value)
        } else if (this.num === 1) {
          this.$emit('on-change-echarts-type', item.code_value)
        }
      },
      // ****************************************** 指标 ******************************************
      // 多选项改变事件
      itemCheckboxChange1 (item) {
        this.eventIndicatorList.forEach(obj => {
          obj.vs_itemShow = false
        })
        if (item.vs_isSelect === true) {
          item.vs_itemShow = true
          item.vs_radio = 0
          item.vs_colume_chs = item.vs_colume_chs + '_' + item.vs_list[item.vs_radio].tgt_name
          item.vs_tgt_meta_id = item.vs_list[item.vs_radio].tgt_meta_id
        } else {
          item.vs_itemShow = false
          item.vs_radio = null
          item.vs_colume_chs = item.vs_colume_chs.split('_')[0]
          item.vs_tgt_meta_id = ''
        }
        for (let i = 0; i < this.eventIndicatorList.length; i++) {
          if (this.eventIndicatorList[i].vs_isSelect === true) {
            this.all = true
          } else {
            this.all = false
            break
          }
        }
      },
      // 单选项改变事件
      radioChange (ind, index) {
        this.eventIndicatorList[ind].vs_radio = index
        this.eventIndicatorList[ind].vs_colume_chs = this.eventIndicatorList[ind].vs_colume_chs.split('_')[0] + '_' + this.eventIndicatorList[ind].vs_list[this.eventIndicatorList[ind].vs_radio].tgt_name
        this.eventIndicatorList[ind].vs_tgt_meta_id = this.eventIndicatorList[ind].vs_list[this.eventIndicatorList[ind].vs_radio].tgt_meta_id
        this.eventIndicatorList[ind].vs_itemShow = false
        this.eventIndicatorList.splice(ind, this.eventIndicatorList[ind])
      },
      // 指标全选
      changeAll1 (val) {
        if (val === true) {
          this.eventIndicatorList.forEach(item => {
            item.vs_isSelect = true
            item.vs_radio = 0
            item.vs_colume_chs = item.vs_colume_chs.split('_')[0] + '_' + item.vs_list[item.vs_radio].tgt_name
            item.vs_tgt_meta_id = item.vs_list[item.vs_radio].tgt_meta_id
          })
        } else {
          this.eventIndicatorList.forEach(item => {
            item.vs_isSelect = false
            item.vs_radio = null
            item.vs_colume_chs = item.vs_colume_chs.split('_')[0]
            item.vs_tgt_meta_id = ''
          })
        }
        this.eventIndicatorList.forEach(obj => {
          obj.vs_itemShow = false
        })
      },
      // 利用此方法监听父组件数组变化，并取到数组
      getEventIndicatorList (list) {
        this.eventIndicatorList = list
      },
      radioListShow (item, ind) {
        if (item.vs_isSelect) {
          item.vs_itemShow = true
          this.eventIndicatorList.splice(ind, 1, item)
        }
      },
      radislistHide (item, ind) {
        item.vs_itemShow = false
        this.eventIndicatorList.splice(ind, 1, item)
      },
      // ****************************************** 日期 ******************************************
      // 改变日期时间
      changeDate (arr) {
        if (arr === null) {
          this.$emit('on-change-date', [])
          return
        }
        let dateValue = []
        arr.forEach((item, key) => {
          dateValue[key] = getDateTime(item, 's')
        })
        sessionStorage.setItem('from_date', dateValue[0])
        sessionStorage.setItem('to_date', dateValue[1])
        this.$emit('on-change-date', dateValue)
      },
      getDateList (list) {
        list.forEach((item, index) => {
          this.dateTime.splice(index, 1, item)
        })
        this.changeDate(this.dateTime)
      }
    },
    created () {
      this.dateTime[0] = new Date()
      this.dateTime[1] = new Date()
      this.$emit('getTime', this.dateTime)
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.graphicList = this.data.B010016
      this.requestTimeList = this.data.B010009
      this.requestTimeList.forEach(item => {
        item.code_value_nm_cns = `按${item.code_value_nm_cns}`
      })
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .v-tool-bar
    .rf
      .el-button
        font-size 12px
        padding 0
        width 80px
        height 30px
        border-radius 0
        background #016DFB
        border 1px solid #016DFB
        color #fff
        position relative
      .el-button:hover
        background #a1cfff
        border 1px solid #a1cfff
      .el-button:active
        background #3a7cc1
        border 1px solid #3a7cc1
  .vs-multiple-selection, .vs-group-display
    padding 12px 0
    .select-all, .checkbox-item
      height 30px
      line-height 30px
      padding 0 12px
    .select-all:hover, .checkbox-item:hover
      background-color #f5f7fa
    .el-checkbox__label
      font-size 12px
    .checkbox-list
      .checkbox-item
        position relative
        .el-checkbox .el-checkbox__label
          font-size 12px
        .radio-list
          background-color #fff
          min-width 100px
          padding 15px 0
          border 1px solid #ebeef5
          box-shadow 0 2px 12px 0 rgba(0, 0, 0, .1)
          position absolute
          top 0
          right -100px
        .radio-item
          width 100%
          padding 0 10px
          font-size 12px
          height 30px
          line-height 30px
          .el-radio__label
            font-size 12px
        .radio-item:hover
          background-color #f5f7fa
  .vs-graphic, .vs-timeRequest
    .el-dropdown-menu__item
      font-size 12px
  .vs-group-display
    .checkbox-list
      position relative
      .result-list
        background-color #fff
        min-width 100px
        padding 15px 0
        border 1px solid #ebeef5
        box-shadow 0 2px 12px 0 rgba(0, 0, 0, .1)
        position absolute
        top -43px
        right 150px
        .result-item
          padding 0 15px
          height 30px
          line-height 30px
        .result-item:hover
          background-color #f5f7fa
</style>
